<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/20
  Time: 21:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="/layui-v2.9.0/layui/layui.js"></script>
</head>
<body>
<div style="width: 1380px">

    <div class="layui-col-xs10 layui-col-xs-offset1">

        <ul class="layui-nav layui-bg-gray">
            <li class="layui-nav-item left-nav layui-col-xs2">
                <!-- 品牌logo位置 -->
                <div class="nav-profile">
                    <!-- 图像使用div包裹，设置相对定位 -->
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="logo_img" src="/img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="/forward/indexPage" style="color: black;">热趣部落</a>
                </div>
            </li>
            <li class="layui-nav-item layui-this layui-col-xs1"><a href="/forward/indexPage">首页</a></li>
            <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
            <li class="layui-nav-item layui-col-xs1">
                <a href="javascript:;">模块</a>
                <dl class="layui-nav-child">
                    <dd><a href="/bar/barDetail?bid=${requestScope.bar.bid}">趣点模块</a></dd>
                    <dd><a href="">动态模块</a></dd>
                    <dd><a href="">个人信息模块</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item "><a href="">关于</a></li>
            <!--            个人信息接口-->
            <li class="layui-nav-item layui-col-xs2" style="float: right">
                <div class="nav-profile">
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="layui-nav-img" src="${sessionScope.user.upictureurl}" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="javascript:;" style="color: black;">${sessionScope.user.uname}</a>
                    <dl class="layui-nav-child" style="text-align: center">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">我的好友</a></dd>
                        <dd >
                            <div >
                                <a href="/logout/user"> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>


    <div class="layui-col-xs10 layui-col-lg-offset1" style="height: auto;margin-top: 10px">
        <div class="layui-panel">

            <div style="padding: 32px;display: flex" class="layui-col-xs12 layui-bg-gray">
                <img src="${requestScope.bar.bimageurl}" style="transform: scale(2.5); margin-top: 15px"
                     class="layui-nav-img">
                <p style="white-space:pre;margin-top: 15px;font-weight: bold;margin-left: 20px;font-size: 20px;" >${requestScope.bar.bname}  </p>
                <p style="white-space:pre;margin-top: 17px"><i class="layui-icon layui-icon-username"></i> 关注人数: 40    </p>
                <p style="margin-top: 17px"><i> 帖子 <span class="layui-badge"> 4000 </span></i>
                <p style="white-space:pre;">      </p>
                <button type="button" id="subscribe" onclick="subscribeBar()" class="layui-btn layui-btn-small" style="margin-top: 10px;width: 100px;">
                    关注
                </button>

                <ul class="layui-nav layui-col-xs6 layui-col-lg-offset1 layui-bg-gray" style="height: auto;">
                    <li class="layui-form layui-col-xs" style="margin-top: 20px;margin-left: 40px;display: flex">
                        <input type="text" name="" placeholder="请输入关键词" class="layui-input" style="margin-left: 30px;">
                        <a>
                            <button type="button" class="layui-btn layui-bg-blue" style="margin-left: 10px">
                                <i class="layui-icon layui-icon-search" style="margin-right: 10px"></i>
                                搜索
                            </button>
                        </a>
                    </li>
                </ul>

            </div>

            <div class="layui-col-xs12 layui-bg-gray" style="height: 20px;" >
                <ul class="layui-nav layui-bg-gray">
                    <li class="layui-nav-item layui-this"><a href="">看帖</a></li>
                    <li class="layui-nav-item"><a href="">吧主推荐</a></li>
                </ul>
            </div>

            <div class="layui-bg-gray" id="top-tiezi" style="margin-top: 50px;width: 850px;height:auto;float: left" >
                <!--                <div class="layui-bg-gray"  style="padding: 16px;">-->
                <div id="commentsContainer" class="layui-row layui-col-space15">
                    <!--                    这里是自己刚发表的评论-->
<%--                    <div id="first" class="layui-col-xs12 ">--%>
<%--                        <div class="layui-card-header"  style="display: flex">--%>
<%--                            <img src="../img/05.jpg" class="layui-nav-img">--%>
<%--                            <p class="user";>--%>
<%--                                <a href="" class="user-mes1">小马宝莉  </a>--%>
<%--                                <a href="comment.html" style="color: #1e9fff" class="post-tit1">威龙和显卡爪刀选哪个？</a>--%>
<%--                            </p>--%>
<%--                        </div>--%>
<%--                        <div class="layui-card-body"style="font-size: 18px;">--%>
<%--                            <p id="MyComment"></p>--%>
<%--                            <div >--%>
<%--                                <img src="../img/02.jpg" class="layui-card-img">--%>


<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
                </div>
            </div>

            <div class="layui-bg-gray" style="margin-top: 50px;width: 850px;height:auto;float: left" >
                <!--                <div class="layui-bg-gray"  style="padding: 16px;">-->
<%--                已发表的评论--%>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12 " id="ID-flow-demo-manual">
                        <div class="layui-card">
                            <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <!--                    //下面是评论画板区-->
            <div class="layui-row layui-col-space15" id="commentArea">
                <div class="layui-col-md12 " >
                    <div class="layui-card">
                        <div class="layui-card-header"  style="display: flex">
                            <img src="${sessionScope.user.upictureurl}" class="layui-nav-img" >
                            <p class="user";>
                                <a href="" class="user-mes1 layui-icon-hover">${sessionScope.user.uname}  </a>
                            </p>
                        </div>
                        <div class="layui-card-body"style="font-size: 18px;">
                            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                                <i class="layui-icon layui-icon-upload"></i> 图片上传
                            </button>
                            <div style="width: 132px;" >
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                    <div id="ID-upload-demo-text"></div>
                                </div>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div>
                            <div class="layui-form">
                                <label>
                                    <input id="titleInput" type="text" name="" placeholder="标题......" class="layui-input">
                                </label>
                            </div>
                            <div class="layui-form">
                                <label>
                                    <textarea id="commentInput" name="" placeholder="内容......" class="layui-textarea"></textarea>
                                </label>
                            </div>

                            <div class="layui-btn-container">

                                <button type="button" class="layui-btn layui-btn-normal" onclick="postComment()">发表</button>

                            </div>
                        </div>

                        <div class="layui-cols-xs12 layui-bg-gray"  style="height: 50px">

                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<script>

    var $ = layui.$;
    var layer;
    var url;
    var bid = '${requestScope.bar.bid}';
    var userName = '${sessionScope.user.uname}';
    var userUrl = '${sessionScope.user.upictureurl}';
<%--    自定义关注函数--%>
    function subscribeBar(){
        let v = document.getElementById("subscribe");
        if(v.classList.contains("layui-bg-blue")){
            $.ajax({
                //执行一个取消订阅操作
                url: "/subscribe/insertSubscribeInfo",
                data: {
                    bid: ${requestScope.bar.bid}
                },
                success: function (data) {
                    v.classList.remove("layui-bg-blue");
                    v.classList.add("layui-bg-gray");
                    v.innerText = "取消关注";
                },
                error: function (data) {
                    layer.msg("取消关注失败");
                }
            })

        } else {
            $.ajax({
                //执行一个取消订阅操作
                url: "/subscribe/deleteSubInfo",
                data: {
                    bid: ${requestScope.bar.bid}
                },
                success: function (data) {
                    v.classList.remove("layui-bg-gray");
                    v.classList.add("layui-bg-blue");
                    v.innerText = "关注";
                },
                error: function (data) {
                    layer.msg("关注失败");
                }
            })

        }

    }

    //上传图片方法
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;

        // 图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/upload/uploadImg', // 实际使用时改成您自己的上传接口即可。
            dataType: 'json',
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    layer.msg('上传成功');
                    url = res.data;
                } else
                    layer.msg('上传失败');
                console.log(res.data);
                // 上传成功的一些操作
                // …
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n === 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });


    layui.use(function(){
        $ = layui.$;
        layer = layui.layer;
        var util = layui.util;
        // 事件
        util.on('lay-on', {

            'test-iframe-curl': function(){
                layer.open({
                    type: 2,
                    title: '评论',
                    shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1000px', '550px'],
                    content: 'comment.html'
                });
            }
        })


        //关注按钮动态显示
        $.ajax({
            //执行一个取消订阅操作
            url: "/subscribe/getSubscribeByUB",
            data: {
                bid: ${requestScope.bar.bid}
            },
            success: function (data) {
                if(data === 'true'){
                    document.getElementById("subscribe").classList.add("layui-bg-gray");
                    document.getElementById("subscribe").innerText = "已关注";
                } else {
                    document.getElementById("subscribe").classList.add("layui-bg-blue");
                    document.getElementById("subscribe").innerText = "关注";

                }
            },
            error: function (data) {
                layer.msg('加载失败，请检查网络');
            }
        })

    });
    //点赞按钮的响应事件
    var isLiked = false; // 用来跟踪按钮状态的变量
    function trance(){
        let thumb = document.getElementsByClassName('thumbs')
        for(let i=0;i<thumb.length;i++){
            if (thumb[i].classList.contains('layui-icon-heart')) {
                // 如果已经被点击过，恢复默认颜色（假设默认颜色是黑色）
                thumb[i].classList.remove('layui-icon-heart'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart-fill');
                isLiked = false; // 重置状态
            } else {
                // 如果未被点击过，设置颜色为红色
                thumb[i].classList.remove('layui-icon-heart-fill'); // 或者设置为您想要的默认颜色，如 'black'
                thumb[i].classList.add('layui-icon-heart');
                isLiked = true; // 更新状态
            }
        }
    }
    layui.use(function(){
        var flow = layui.flow;
        var $ = layui.$;
        // 流加载实例
        flow.load({
            elem: '#ID-flow-demo-manual', // 流加载容器
            scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
            isAuto: false,
            isLazyimg: true,

            done: function(page, next){ // 加载下一页
                // 获取数据
                let data = [];
                $.ajax({
                    url: '/post/getPostByPage',
                    dataType: 'json',
                    data: {
                        page: page,
                        limit: 2,
                        bid: ${requestScope.bar.bid}
                    },
                    success: function(res){
                        data = res;
                        console.log(res);
                    },
                    error: function(err){
                        layer.msg('请求失败，请检查网络');
                    }
                });
                // 模拟插入
                setTimeout(function(){
                    var lis = [];
                    for(var i = 0; i < data.length; i++){
                        lis.push(`<div class="layui-card">
                            <div class="layui-card-header" style="display: flex">
                            <img src="\${data[i].user.upictureurl}" class="layui-nav-img">
                            <p class="user">
                            <a href="" class="user-mes1">\${data[i].user.uname}</a>
                            <a href="/post/getPostByPid?pid=\${data[i].pid}" style="color: #1e9fff" class="post-tit1">\${data[i].ptitle}</a>
                            </p>
                            </div>
                            <div class="layui-card-body" style="font-size: 18px;">
                            \${data[i].ptext}<br>
                            <div>
                            <img src="\${data[i].purl}" class="layui-card-img">
                            <div style="display: flex">
                            <li class="layui-icon layui-icon-heart thumbs" onclick="trance()" data-target="thumbs" style="font-size: 30px; margin-bottom:20px;margin-left: 670px" ></li>
                            <li class="layui-icon layui-icon-reply-fill" style="font-size: 27px; margin-bottom: 20px;margin-left: 40px" lay-on="test-iframe-curl"></li>
                            </div>
                            </div>
                            </div>
                            </div>`)
                    }
                    next(lis.join(''), page < 1000); // 假设总页数为 6,//后续更换成数据库中的总条数
                }, 520);
            }
        });
    });

    function postComment() {
        // 获取输入框的值
        var comment = document.getElementById('commentInput').value;
        var title = document.getElementById('titleInput').value;

        // 如果评论不为空，则添加到评论容器中
        if ((comment.trim() !== '')&& (title.trim() !== '')) {
            // 创建一个新的评论元素

            //上传评论数据操作
            $.ajax({
                url: '/post/addPost?bid='+bid,
                data: {
                    title: title,
                    text: comment,
                    url: url,
                },
                success: function (res) {
                    var newComment = document.createElement('div');
                    newComment.classList.add("comment-item"); // 可以添加一个CSS类来美化评论的样式
                    newComment.innerHTML = `
                            <div class="layui-card-header" style="display: flex">
                                <img src="\${userUrl}" class="layui-nav-img">
                                <p class="user">

                                    <a href="" class="user-mes1">\${userName}</a>
                                    <a  href="/post/getPostByPid?pid=\${res}" style="color: #1e9fff" class="post-tit1">
                                    <p >\${title}</p></a>
                                </p>
                            </div>
                            <div class="layui-card-body" style="font-size: 18px;">
                                <p>\${comment}</p>
                            </div>
                            <img src="\${url}" class="layui-card-img">
                            `;

                    // 清空评论输入框的值
                    document.getElementById('commentInput').value = '';
                    document.getElementById('titleInput').value = '';
                    // 将新的评论元素添加到评论容器的顶部
                    var commentsContainer = document.getElementById('commentsContainer');
                    commentsContainer.insertBefore(newComment, commentsContainer.firstChild);

                    // 滚动到页面顶部（如果需要）
                    // 注意：这里假设#top-tiezi是您想要滚动到的元素
                    var topNav = document.getElementById('top-tiezi');
                    if (topNav) {
                        window.scrollTo(0, topNav.offsetTop);
                    }
                },
                error: function (err) {
                    layer.msg('请求失败，请检查网络');
                }
            });
        }
    }

</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }
    .mbx{
        padding: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .span_css{
        margin-top: 20px
    }
    /*标签导航*/
    .a_index1{
        margin-left: 20px;
        margin-top: 20px;
        /*text-decoration: underline;*/
    }
    .a_index3{
        font-size: 13px;
        width: 5em;
        /*margin-left: 20px;*/
        margin-top: 20px;
    }
    a:hover{
        text-decoration: underline;
    }
    .a_index4{
        font-size: 15px;
        width: 4em;
        margin-left: 10px;
        margin-top: 20px;
        text-align: center;
    }
    .p_index{
        color: black;
        margin-top: 10px;
    }
    .div_index{
        padding: 10px;
    }
    .p_index_color {
        background-color: #dbfbf0; /* 鼠标移入时的背景颜色 */
    }
    /*标签图片*/
    .img-index{
        width: 20px;
        height: 20px;
    }
    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
    h3{
        margin-top: 0;
    }
    .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
        width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
        height: auto; /* 保持图片的高宽比 */
        border-radius: 0; /* 移除边框圆角 */
        border: none; /* 如果图片有边框，也移除它 */
        /* 可以添加其他图片样式，比如margin, padding等 */
    }
    .layui-btn-small {
        padding: 1px 10px;
        font-size: 15px;
    }
</style>

</body>
</html>